<template>
  <div class="app">
    <div class="boxone">
      <el-page-header :icon="ArrowLeft" title="编辑通知 " @click="fun()">
        <template #extra>
          <div class="flex items-center">
            <el-button @click="fun()">取消</el-button>
            <el-button type="primary" @click="fun()">发送</el-button>
          </div>
        </template>
      </el-page-header>
    </div>
    <div class="box">
      <div class="block">
        <el-date-picker
          v-model="value1"
          type="date"
          placeholder="Pick a day"
          :prefix-icon="customPrefix"
        />
        <el-button type="primary" @click="timestudent">查询</el-button>
      </div>
      <div class="boxtwo">
        <el-table :data="tableData" border style="width: 100%" stripe="ture">
          <el-table-column  align="center" label="序号" width="90" >
      <template #default="scope" >
       <span>{{ scope.$index + 1 }}</span>
        </template>
          </el-table-column>
          <el-table-column
            prop="name"
            align="center"
            label="年级班级"
            width="188"
          />
          <el-table-column
            prop="student.name"
            width="187"
            align="center"
            label="学生姓名"
          />
          <el-table-column
            prop="student.sex"
            width="167"
            align="center"
            label="性别"
          />
          <el-table-column
            prop="student.documentNum"
            width="295"
            align="center"
            label="学籍号"
          />
          <el-table-column
            prop="state"
            width="160"
            align="center"
            label="今日考勤状态"
          />
          <el-table-column prop="id" width="242" align="center" label="操作">
            <template #default="scope">
               <el-link type="primary"  @click="queqin(scope.$index + 1)"> 迟到 </el-link>
               <el-link type="success"   @click="chidao(scope.$index + 1)">缺勤 </el-link>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import server from "@/api/index.ts";
//获取路由管理实例
var router = useRouter();
var fun = () => {
  router.push("/index/jiaxiaohudong/chuqin/dinming");
};

const idlen=ref([])
const tableData = ref([]);
const value = ref("");
// 时间
const value1 = ref("");
import { h, shallowRef } from "vue";
const customPrefix = shallowRef({
  render() {
    console.log(value1.value);
    return h("p", "pre");
  },
});
// 时间转换
function timeConversion(time) {
  const timeE = new Date(time);
  const year = timeE.getFullYear();
  const month = timeE.getMonth() + 1; // 返回值范围是0~11，需要加1才是实际月份
  const day = timeE.getDate();
  const ti = `${year}-${month}-${day} `;
  return ti;
}
var timestudent = async () => {
  var times = timeConversion(value1.value);
  console.log(times);
  var res = await server.jiaxiaohutong.link({ time: times, cp: 1, ps: 5 });
  console.log(res.data.data.date);
  tableData.value = res.data.data.date;
      idlen.value=res.data.data.date
 console.log(111,idlen.value);
  if (res.data.code == 200) {
    ElNotification.success({ message: "查看成功" });
  }
};

//迟到
var queqin= async(xiabiao)=>{
  var res=await server.jiaxiaohutong.markLate({id:xiabiao})

 if (res.data.code == 200) {
     ElNotification.success({ message: '迟到标记成功' })

  }

}
var chidao=async(xiabiao)=>{
    var res=await server.jiaxiaohutong.markedAbsent({id:xiabiao})
  console.log(res.data);
 if (res.data.code == 200) {
     ElNotification.success({ message: '缺勤标记成功' })
   
  }
}
</script>

<style scoped>
.el-link {
  margin-right: 8px;
}
.block {
  margin-left: 40px;
  margin-bottom: 30px;
}
.boxone {
  border-bottom: 1px solid #000;
}
.app {
  /* margin-left: 100px; */
  width: 100%;
  /* margin-top: 30px; */
}
.box {
  width: 1200px;
  margin-top: 20px;
}
.boxtwo {
  width: 100%;
  background-color: #fff;
  margin: 0 auto;
  text-align: center;
}
.el-option {
  margin-left: 5px;
}
.boxone {
  width: 100%;
  height: 50px;
  margin: 0 auto;
  /* background-color: aliceblue; */
}
.boxone > .el-button {
  margin-left: 90%;
}
.el-link {
  margin: 5px;
}
</style>